<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="赵鹤阳">
    <title>模拟项目</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box {
            width: 600px;
            height: 500px;
            border: 1px solid #bbb;
            margin: 100px auto;
            text-align: center;
        }

        .choose {
            margin-left: 200px;
        }

        .choose>li {
            width: 100px;
            height: 30px;
            float: left;
            background-color: #dfd;
        }

        .choose .unsele {
            position: relative;
            background-color: #ccc;
        }

        .item {
            width: 100px;
            position: absolute;
            top: 30px;
            border: 1px solid #ddd;
            display: none;
        }

        .item li {
             width: 100%; 
            line-height: 30px;
        }
        .item li a{
            width: 100%;
            color: #000;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="choose">
            <li>选择项目：</li>
            <li class="unsele"><span>未选择</span>
                <ul class="item">
                    <li><a href="#">html5</a></li>
                    <li> <a href="#">css3</a></li>
                    <li> <a href="#">JaveScript</a></li>
                    <li> <a href="#">jQuery</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('.unsele').click(function (ev) {
        $('.item').css('display', 'block')
ev.stopPropagation();
    });
    $('.item>li>a').each(function (index) {
        $(this).hover(function () {
            $('.item>li').eq(index).css('background', '#bbb');
        }, function () {
            $('.item>li').eq(index).css('background', '');
        });
        $('.item>li>a').click(function(){
            $('span').html($(this).html());
        });
    });
$('body').click(function(){
    $('.item').css('display','none');
})
</script>